<template>
	<div class="News">
		<!-- 头部 -->
		<Header :navActive="4" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
			<div class="banner"></div>
            <div class="w1200">
                <!-- 资讯分类 -->
                <div class="tabs" id="tabs">
                    <div class="item" :class="channelId==item.id?'active':''" v-for="(item,index) in channels" :key="index" @click="getContentList(item.id,1)">{{item.name}}</div>
                </div>
                <div class="block">
                    <!-- 区块  -->
                    <div class="list list1" v-if="blockDataList.length>0">
                        <router-link class="item" :to="{name:'NewsDetails',query:{id:item.sourceId}}" target="_blank" v-for="(item,index) in blockDataList" :key="index">
                            <div class="img"><img :src="item.thumb_dictText"></div>
                            <div class="text">
                                <div class="title">{{item.title}}</div>
                                <div class="more">更多 <i class="el-icon-arrow-right"></i></div>
                            </div>
                        </router-link>
                    </div>
                    <!-- 内容列表 -->
                    <div class="list list2">
                        <router-link class="item" :to="{name:'NewsDetails',query:{id:item.id}}" target="_blank" v-for="(item,index) in contentList" :key="index">
                            <div class="img" v-if="item.thumb_dictText"><img :src="item.thumb_dictText"></div>
                            <div class="text">
                                <div class="title">{{item.title}}</div>
                                <div class="dsc" v-html="item.seoDesc"></div>
                                <div class="date">发布时间：{{
                                    $moment(item.publishTime, "yyyy-MM-DD HH:mm:ss").format("yyyy-MM-DD")
                                    }}
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <!-- 暂无数据 -->
            <nodata v-if="contentList.length==0" />
            <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
		</div>
		<!-- 底部 -->
		<Footer />
	</div>
</template>

<script>
	import {cmsChannel_list,cmsContent_list,block} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import nodata from '@/components/nodata.vue'
	export default {
		//组件注入
		components: {Header,Footer,nodata},
		//存放数据
		data() {
			return {
                pageTotal:0,
                channels:[],
                contentList:[],
                pageNo:1,
                pageSize:10,
                channelId: null,
                isLastPage: false,
                blockDataList:[]
			}
		},
		//接受父组件传递的值
        props:[],
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.contentList = []
                this.getContentList(this.channelId,this.pageNo);
                document.querySelector('#tabs').scrollIntoView(true)
            },
            //加载更多页
            getMore(){
                this.pageNo++;//页码增加
                console.log("页码增加")
                this.getContentList(this.channelId,this.pageNo);
            },
            //获取内容列表
            getContentList(id,pageNo){
                this.pageNo = pageNo;
                this.channelId = id;//当前channelid
                this.getBlockList();//加载区块
                cmsContent_list({
                    'channelId':id,
                    'pageNo': this.pageNo,
                    'pageSize':this.pageSize
                }).then(res =>{
                    if(200==res.code){
                        if(1==pageNo){
                            this.contentList = [];
                        }
                        this.contentList = res.result.records;
                        this.pageTotal = res.result.total
                        this.isLastPage = this.$isLastPage(res.result);//是否最后一页
                    }else {
                        this.$loadError(res);//加载失败（默认处理）
                    }
                });
            },
            //获取内容列表
            getBlockList(){
                block({
                    'code':this.channelId,
                    'pageNo': 1,
                    'pageSize':3
                }).then(res =>{
                    if(200==res.code){
                        let blockDataList = res.result.blockData.slice(0,3);
                        this.blockDataList = blockDataList;
                    }
                });
            },
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {

        },
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
            //获取栏目列表
            cmsChannel_list({
                'parentId':'news'
            }).then(res =>{
                if(200==res.code){
                    this.channels = res.result.records
                    this.getContentList(this.channels[0].id,1);//默认显示第一个栏目的内容列表
                }
            });
		}
   };
</script>
<style lang="scss">
	@mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	@mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
	@mixin transition{transition: all .3s;}
	.News{background: #F6F6F6;
		.main{height: auto;padding-bottom: 145px;position: relative;z-index: 0;
            .banner{width: 100%;height: 120px;background: url('../../assets/news-bg.jpg') center no-repeat;background-size: cover;}
            .tabs{height: auto;overflow: hidden;margin: 30px 0 15px;text-align: center;
                .item{font-size: 18px;color: #333;display: inline-block;margin: 0 60px;cursor: pointer;text-align: center;position: relative;padding-bottom: 15px;@include transition();
                    &:after{content: "";width: 0;height: 3px;background: #E54437;position: absolute;left: 0;bottom: 0;right: 0;margin: auto;@include transition()}
                    &.active,&:hover{
                        &:after{width: 50px;}
					}
					&.active{font-weight: bold;}
                    &:hover{color: #E54437;}
                }
            }
            .block{height: auto;overflow: hidden;background: #fff;padding: 40px 70px;
                .list{height: auto;overflow: hidden;
                    .item{height: auto;overflow: hidden;cursor: pointer;
                        .img{overflow: hidden;
                            img{width: 100%;height: 100%;}
                        }
                        .title{font-size: 18px;color: #333;line-height: 30px;@include transition();}
                        &:hover{
                            img{transform: scale(1.05);}
                            .title{color: #E54437;}
                        }
                    }
                    &.list1{width: 1215px;margin-bottom: 70px;
                        .item{width: 320px;float: left;margin-right: 50px;
                            .img{width: 320px;height: 180px;margin-bottom: 15px;}
                            .text{
                                .title{height: auto;@include text-ellipsis}
                                .more{font-size: 14px;color: #777;margin-top: 15px;}
                            }
                        }
                    }
                    &.list2{
                        .item{padding-bottom: 30px;margin-bottom: 30px;border-bottom: 1px solid #eee;display: block;
                            .img{width: 285px;height: 158px;float: left;margin-right: 30px;}
                            .text{height: auto;overflow: hidden;padding-top: 10px;
                                .title{@include text-ellipsis()}
                                .dsc{font-size: 14px;color: #666;line-height: 24px;margin-top: 10px;@include text-ellipsisclamp(2)}
                                .date{font-size: 14px;color: #999;margin-top: 20px;}
                            }
                            &:last-child{margin: 0;padding: 0;border: 0;}
                        }
                    }
                }
                .btn{width: 230px;margin: 40px auto 0;display: block;background: none;}
            }
		}
	}
</style>
